<!--
	文档的声明,位于整个HTML文档的最上方
	用于声明当前HTML的版本,告诉浏览器当前使用的是哪个HTML版本
-->
<!DOCTYPE html>
<!--
	所有的HTML标签都拥有一个共同的祖先标签:html
	有且仅有一对html标签
	且一个html标签只有两个合法的子标签:head、body
-->
<html>
<!--
    head标签:头标签
        头标签是为当前的HTML页面设置一些相关信息
        头标签的内容不会在页面中展示,但是具有对应的功能
-->
<head>
    <!--
        title标签:标签页标题标签
            设置浏览器标签页的内容
    -->
    <title>第一个HTML页面</title>
    <!--
        meta标签:元数据标签,可以有无数个,每一个元数据都具有特定功能
    -->
    <meta charset="UTF-8"/>
    <!--
        可以通过name属性设置一些元数据
        keywords:用于表示网站的关键字,可以设置无数个关键字,每个关键字之间以逗号分隔
        在网页进行搜索的时候,会根据关键字进行搜索
    -->
    <meta name="keywords" content="java,web,it,软件开发,计算机软件">
    <!--
        description:设置网站的描述信息,会在搜索引擎的搜索结果下展示
    -->
    <meta name="description" content="从零开始学习HTML">
    <!--
        author:作者
    -->
    <meta name="author" content="石小俊">
</head>
<!--
    body标签:正文标签,为页面赋予具体的内容
        一般情况下,所有的内容都必须在body标签中进行编写
-->
<body>
<!--
    根据标签是否关闭分为两种:关闭标签与非关闭标签
    关闭标签:凡是存在标签体的标签都是关闭标签
    语法:<标签名 属性名="属性值" 属性名="属性值">标签体</标签名>
    每一个标签都有自己独特的效果,还可以通过属性为标签赋予额外的效果
-->
<h1 style="color:red;">这是正文标题</h1>
<font color="red" size="10" face="楷体">这是字体</font>
<!--
    非关闭标签:不存在标签体的标签称之为非关闭标签
    这种标签又称之为自结束标签或者空标签
    语法:<标签名/>,/可以省略
-->
<hr>
Hello<br>
World
<hr>

<!--
    根据标签是否独占一行分为:块级标签、行级标签
    块级标签:显示为块状态,独占一行,自带换行,不与其他标签共占一行
-->
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<!-- 相当于下面用法 -->
这是一个文本<br>
这是一个文本<br>
这是一个文本<br>
<hr>
<!--
    行级标签:不自带换行,可以与其他行级标签共占一行
    这种标签本质上与不用标签效果基本一致
    该标签主要是用于表示一个区域,可以通过css为该区域中所有元素赋予外观
-->
<span style="color:red;">这是一个行级标签</span>
<span>这是一个行级标签</span>
<span>这是一个行级标签</span><br>
这是一个文本
这是一个文本
这是一个文本
</body>
</html>








